<template>
  <div class="modal is-active">
    <div class="modal-background"></div>
    <div class="modal-card" ref="modelCardRef">
      <header class="modal-card-head">
        <p class="modal-card-title">
          <i class="iconfont icon-warning"></i>
          <span class="modal_title">删除事项</span>
        </p>
        <button @click="closeModal" class="delete" aria-label="close" />
      </header>
      <section class="modal-card-body">
        是否确认删除该事项?
      </section>
      <footer class="modal-card-foot is-justify-content-flex-end">
        <button class="button" @click="closeModal">
          取消
        </button>
        <button class="button is-warning" @click="handleDeteleNote">
          确认
        </button>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { onClickOutside } from '@vueuse/core'
import { useNotesStore } from '@/stores';

const store = useNotesStore()
const { deleteNode } = store

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  noteId: {
    type: String,
    required: true
  }
})
const emits = defineEmits(['update:modelValue']);

const closeModal = () => {
  emits('update:modelValue', false)
}
const handleDeteleNote = () => {
  deleteNode(props.noteId)
}

const modelCardRef = ref(null)
onClickOutside(modelCardRef, closeModal);

const onKeyUp = (e) => {
  if (e.key === 'Escape') {
    closeModal()
  }
  if (e.key === 'Enter') {
    handleDeteleNote()
  }
}
onMounted(() => {
  document.addEventListener('keyup', onKeyUp)
});
onBeforeUnmount(() => {
  document.removeEventListener('keyup', onKeyUp)
});

</script>

<style lang="scss" scoped>
* {
  font-family: 'Times New Roman', Times, serif;
}

.modal-card-body {
  padding-top: 40px;
  padding-bottom: 40px;
  font-size: 20px;
  text-indent: 2rem;
}

.modal-card-title {
  color: hsl(48, 100%, 67%);

  i {
    font-size: 1.5rem;
    line-height: 1;
    margin-right: 10px;
  }
}

.button {
  font-weight: 600;
}
</style>